<template>
  <div>
    <van-nav-bar
      title="微应用"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right></template>
    </van-nav-bar>
    <div class="sousuo">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
      </van-dropdown-menu>
      <van-search v-model="value" placeholder="查询个人征信" />
    </div>
    <!-- 分类 -->
    <div>
      <van-tree-select
        height="140vw"
        :items="items"
        :main-active-index.sync="active"
      >
        <template #content>
          <van-image v-if="active === 0" src="wodeimg/wimg/tui.jpg" />
          <van-image v-if="active === 1" src="wodeimg/wimg/fa.jpg" />
          <van-image v-if="active === 2" src="wodeimg/wimg/wo.jpg" />
          <van-image v-if="active === 3" src="wodeimg/wimg/chu.jpg" />
          <van-image v-if="active === 4" src="wodeimg/wimg/wo.jpg" />
          <van-image v-if="active === 5" src="wodeimg/wimg/bian.jpg" />
          <van-image v-if="active === 6" src="wodeimg/wimg/jin.jpg" />
          <van-image v-if="active === 7" src="wodeimg/wimg/you.jpg" />
        </template>
      </van-tree-select>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      value1: 0,
      option1: [
        { text: "西安市", value: 0 },
        { text: "宝鸡市", value: 1 },
        { text: "咸阳市", value: 2 },
      ],
      active: 0,
      items: [],
      value: "",
      items: [
        { text: "推荐" },
        { text: "最近" },
        { text: "我的" },
        { text: "出行" },
        { text: "美食" },
        { text: "便民" },
        { text: "金融" },
        { text: "游戏" },
      ],
    };
  },
  methods: {
    onClickLeft() {
      Toast(this.$router.go(-1));
    },
    // change() {
    //   console.log(this.active, "=====");
    // },
  },
  mounted() {
    const areaList1 = {
      province_list: {
        110000: "北京市",
        120000: "天津市",
      },
      city_list: {
        110100: "北京市",
        120100: "天津市",
      },
      county_list: {
        110101: "东城区",
        110102: "西城区",
        // ....
      },
    };
    this.areaList = areaList1;
  },
};
</script>

<style scoped>
.sousuo {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>